import { Tabs, Button, Form, Input } from 'antd';
import React, { useState, useEffect } from 'react';
import withRouter from '../hooks/withRouter'
import '../style/login.scss'
import baseApi from '../api/base'

const { TabPane } = Tabs

function Login (props) {
  const [activeKey, setActiveKey] = useState('login')
  const [loginBtnLoading, setLoginBtnLoading] = useState(false)
  const [registerBtnLoading, setRegisterBtnLoading] = useState(false)

  
  const [loginForm] = Form.useForm()
  const [registerForm] = Form.useForm()

  useEffect(() => {
    document.title = `${activeKey === 'login' ? '登录' : '注册'}-后台管理系统`
  }, [activeKey])

  const onLogin = (e) => {
    setLoginBtnLoading(true)
    baseApi.loginApi(e).then(res => {
      window.$message.success('登录成功')
      const { token, userInfo } = res.result
      sessionStorage.setItem('token', token)
      sessionStorage.setItem('userInfo', JSON.stringify({
        id: userInfo.id,
        account: userInfo.account,
        username: userInfo.username,
        isadmin: userInfo.isadmin
      }))
      props.navigate('/')
    }).finally(() => {
      setLoginBtnLoading(false)
    })
  }

  const onRegister = (e) => {
    if (e.password !== e.repassword) {
      window.$message.error('密码输入不一致')
      return
    }
    setRegisterBtnLoading(true)
    baseApi.registerApi(e).then(res => {
      window.$message.success('注册成功，请登录')
      setTimeout(() => {
        setActiveKey('login')
      }, 500)
    }).finally(() => {
      setRegisterBtnLoading(false)
    })
  }

  return (
    <div className='page-login'>
      <Tabs activeKey={activeKey} animated={true} tabBarGutter={20} onChange={e => setActiveKey(e)}>
        <TabPane tab="登录" key="login">
          <Form
            name="basic"
            className='form-login'
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
            form={loginForm}
            onFinish={onLogin}>
            <Form.Item
              label="账号"
              name="account"
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}>
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit" loading={loginBtnLoading}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </TabPane>

        <TabPane tab="注册" key="register">
        <Form
            name="basic"
            className='form-login'
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
            form={registerForm}
            onFinish={onRegister}>
            <Form.Item
              label="账号"
              name="account"
              type="number"
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}>
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}>
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="重复密码"
              name="repassword"
              rules={[
                {
                  required: true,
                  message: '请再次输入密码',
                },
              ]}>
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit" loading={registerBtnLoading}>
                注册
              </Button>
            </Form.Item>
          </Form>
        </TabPane>
      </Tabs>
    </div>
  )
}

export default withRouter(Login)
